<HTML>
<HEAD>
<TITLE>Obiekt TextRectangle</TITLE>
<SCRIPT LANGUAGE="JavaScript">
// zmienna przechowuje odwoanie do ostatniego kliknitego elementu 
// strony, wykorzystywane w procedurze obsugi zdarze onResize
var lastElem

// Obiekt TextRectangle jest zazwyczaj nieco przesunity w bok
var rectLeftCorrection = 2

// obsuga klikni myszk
function handleClick() {
    var elem = event.srcElement
    if (elem.className && elem.className == "sample") {
        // wyrniamy wycznie wybrane elementy strony
        lastElem = elem
        setHiliter()
    } else {
        // w przeciwnym przypadku ukrywamy prostokt wyrniajcy kliknity element 
        strony
        hideHiliter()
    }
}
function setHiliter() {
    if (lastElem) {
        var textRect = lastElem.getBoundingClientRect()
        hiliter.style.pixelTop = textRect.top + document.body.scrollTop
        hiliter.style.pixelLeft = textRect.left + document.body.scrollLeft  
        rectLeftCorrection
        hiliter.style.pixelHeight = textRect.bottom - textRect.top
        hiliter.style.pixelWidth = textRect.right - textRect.left
        hiliter.style.visibility = "visible"
    }
}
function hideHiliter() {
    hiliter.style.visibility = "hidden"
    lastElem = null
}
</SCRIPT>
</HEAD>
<BODY onClick="handleClick()" onResize="setHiliter()">
<H1>Obiekt TextRectangle</H1>
<HR>
<P>
Kliknij dowolny z elementw strony, wyrnionych w poniszym akapicie rnymi 
kolorami.
Zwr uwag, w jaki sposb prostokt wyrnienia dostosowuje si do wymiarw 
elementu opisanych przez obiekt TextRectangle.</P>

<P CLASS="sample">Lorem ipsum dolor sit amet, <SPAN CLASS="sample" 
STYLE="color:red">consectetaur adipisicing elit</SPAN>, sed do eiusmod tempor <SPAN 
CLASS="sample" STYLE="color:green">incididunt ut labore et dolore <SPAN 
CLASS="sample" STYLE="color:blue">magna aliqua</SPAN>. Ut enim adminim veniam, quis 
nostrud exercitation ullamco</SPAN> laboris nisi ut aliquip ex ea commodo consequat. 
Duis aute irure dolor in reprehenderit involuptate velit esse cillum dolore eu fugiat 
nulla pariatur.</P>
<DIV ID="hiliter" STYLE="position:absolute; background-color:salmon; z-index:-1; 
visibility:hidden"></DIV>
</BODY>
</HTML>